<template>
  <div>
    <s-form ref="form" :value="formValue">
      <s-form-item
        size="custom"
        :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 24 }"
        label="高度"
        name="height"
        :rules="[{ whitespace: true, required: true, message: '不能为空' }]"
      >
        <s-input v-model="formValue.height" placeholder="高度" />
      </s-form-item>
      <s-form-item
        size="custom"
        :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 24 }"
        label="宽度"
        name="width"
      >
        <s-input v-model="formValue.width" placeholder="宽度" />
      </s-form-item>
    </s-form>
  </div>
</template>
<script>
export default {
  name: 'FormProperyPanel',
  props: {
    value: {
      required: false,
      type: Object,
      default: () => {}
    }
  },
  data() {
    return { formValue: JSON.parse(JSON.stringify(this.value)) }
  },
  watch: {
    value: {
      handler: function (val, oldVal) {
        this.formValue = JSON.parse(JSON.stringify(val))
      },
      deep: true
    }
  },
  methods: {
    save(callback) {
      const form = this.$refs.form
      form.validate(
        (values) => {
          callback(values)
        },
        (obj) => {}
      )
    }
  }
}
</script>
